<template>
  <div class="page-container">
    <!-- 自己的主页（带右上角菜单） -->
    <div v-if="isMyProfile">
      <!-- 右上角操作菜单 -->
      <div class="more-menu" :class="{ 'more-menu-item-active': isMenuActive }">
        <div class="more-menu-item" @click="isEditUserActive = true">
          修改个人信息
        </div>
        <div class="more-menu-item" @click="handleLogout">
          退出登录
        </div>
      </div>
      <div class="user-edit-btn" @click="isMenuActive = !isMenuActive">
        <span><p>...</p></span>
      </div>
    </div>

    <!-- 通用用户资料组件（自己/他人主页共用） -->
    <UserProfile 
      :userId="targetUserId" 
      @play-content="handlePlayContent" 
      @click-follows="handleGoFollows" 
      @click-fans="handleGoFans" 
      @click-back="handleBack"
    />

    <!-- 视频播放器 -->
    <div class="shipin">
      <shortVideoPlayer 
        ref="videoPlayerRef" 
        :videoList="currentVideoList" 
        :visible="isPlayerVisible" 
        @back="isPlayerVisible = false" 
      />
    </div>

    <!-- 修改个人信息弹窗（仅自己主页显示） -->
    <div class="edit" v-if="isMyProfile">
      <EditProfile 
        :isShow="isEditUserActive" 
        @close="handleEditClose" 
        :userInfo="userInfo" 
      />
    </div>

    <!-- 关注/粉丝页面路由出口 -->
    <div class="user-follow-page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from "@/store/modules/user/user";
import { initUserInfo } from '@/service/userService';
import UserProfile from '@/components/common/UserProfile.vue'; // 引入封装的用户资料组件
import shortVideoPlayer from '@/components/common/shortVideoPlayer.vue';
import EditProfile from '@/components/common/EditProfile.vue';

// 状态管理
const userStore = useUserStore();
const router = useRouter();

// 页面状态
const targetUserId = ref(null); // 目标用户ID（自己或他人）
const isMyProfile = computed(() => {
  // 判断是否是自己的主页（目标ID等于当前登录用户ID）
  return targetUserId.value === userStore.userInfo.userId;
});

// 组件状态
const userInfo = ref({}); // 当前用户信息
const isMenuActive = ref(false); // 右上角菜单显示状态
const isEditUserActive = ref(false); // 编辑弹窗显示状态
const isPlayerVisible = ref(false); // 视频播放器显示状态
const currentVideoList = ref([]); // 当前播放的视频列表

// 初始化：获取目标用户ID（从路由参数或默认自己）
onMounted(async () => {
  // 示例：从路由参数获取userId（若没有则默认自己）
  const routeUserId = router.currentRoute.value.params.userId;
  targetUserId.value = routeUserId || userStore.userInfo.userId;
  
  // 加载用户信息
  if (targetUserId.value) {
    userInfo.value = await initUserInfo(targetUserId.value);
  }
});

// 事件处理：播放内容
const handlePlayContent = (videoItem) => {
  currentVideoList.value = [videoItem]; // 传递视频数据给播放器
  isPlayerVisible.value = true; // 显示播放器
};

// 事件处理：跳转关注列表
const handleGoFollows = () => {
  router.push(`/user/${targetUserId.value}/follows`);
};

// 事件处理：跳转粉丝列表
const handleGoFans = () => {
  router.push(`/user/${targetUserId.value}/fans`);
};

// 事件处理：返回（仅他人主页有返回按钮）
const handleBack = () => {
  router.back(); // 回退到上一页
};

// 事件处理：关闭编辑弹窗
const handleEditClose = async (isSuccess) => {
  isEditUserActive.value = false;
  if (isSuccess) {
    // 重新加载用户信息
    userInfo.value = await initUserInfo(targetUserId.value);
  }
};

// 事件处理：退出登录
const handleLogout = () => {
  userStore.logout(); // 调用store的退出方法
  router.push('/login'); // 跳转到登录页
};
</script>

<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.page-container {
  position: relative; // 确保子元素绝对定位生效
}

/* 右上角菜单样式（仅自己主页有） */
.more-menu {
  width: 2.1333rem;
  height: 2.3467rem;
  background: rgba(22, 24, 35, 0.6);
  position: absolute;
  top: 2.4rem;
  right: .3rem;
  opacity: 0;
  z-index: 99;
  transition: all 0.3s;

  .more-menu-item {
    width: 100%;
    height: 1.1733rem;
    font-size: .2933rem;
    color: $color-white;
    cursor: pointer;
    @include flex-center;
    transition: all 0.3s;
  }
}

.more-menu-item-active {
  opacity: 1 !important;
  transform: translateY(0); // 修正之前的位移问题
}

.user-edit-btn {
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: rgba(22, 24, 35, 0.6);
  font-size: .4267rem;
  color: $color-white;
  cursor: pointer;
  @include flex-center;
  z-index: 99;

  span {
    width: .8rem;
    height: .8rem;
    @include flex-center;
    margin-bottom: .2333rem;
  }
}

/* 视频播放器容器 */
.shipin {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999; // 确保在最上层
}

/* 编辑弹窗容器 */
.edit {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

/* 关注/粉丝页面容器 */
.user-follow-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 10rem;
  height: 100vh;
  background-color: #161622;
  z-index: 90;
}
</style>